import React from 'react';
import { Row, Col, Button, Select, TreeSelect } from 'antd';
import AuthorizedButton from '@/components/AuthorizedButton';
import { router } from 'umi';

const months = [
  {
    title: '年度合计',
    value: '14',
    key: '14',
  },
  {
    title: '全部月份',
    value: '13',
    key: '13',
    children: [
      { key: '1', value: '1', title: '1月' },
      { key: '2', value: '2', title: '2月' },
      { key: '3', value: '3', title: '3月' },
      { key: '4', value: '4', title: '4月' },
      { key: '5', value: '5', title: '5月' },
      { key: '6', value: '6', title: '6月' },
      { key: '7', value: '7', title: '7月' },
      { key: '8', value: '8', title: '8月' },
      { key: '9', value: '9', title: '9月' },
      { key: '10', value: '10', title: '10月' },
      { key: '11', value: '11', title: '11月' },
      { key: '12', value: '12', title: '12月' },
    ],
  },
];

export default function PageTop(props) {
  const { overAllYears, currentYear, currentMonths, dispatch } = props;
  // 点击项目回款系数
  const handleProjectReturnMoney = () => {
    router.push('/OperatingPlan/PayBackModulus');
  };

  const changeCurrentMonths = value => {
    dispatch({
      type: 'AllReturnMoneyPlan/changeCurrentMonths',
      payload: { currentMonths: value },
    });
  };

  const changeCurrentYear = value => {
    dispatch({
      type: 'AllReturnMoneyPlan/changeCurrentYear',
      payload: { currentYear: value },
    });
  };

  return (
    <Row style={{ margin: '0 0 10px 0' }} type="flex" align="middle" justify="space-between">
      <Col>
        显示：
        <Select defaultValue="最新全盘动态" style={{ maxWidth: '110px' }} size="small">
          <Select.Option key="最新全盘动态">最新全盘动态</Select.Option>
        </Select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <Select
          size="small"
          style={{ width: '100px' }}
          placeholder="请选择"
          value={currentYear}
          onChange={e => changeCurrentYear(e)}
        >
          {overAllYears.map(data => (
            <Select.Option key={data}>
              {data}
              {new Date().getFullYear().toString() === data.toString() && '(今年)'}
            </Select.Option>
          ))}
        </Select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <TreeSelect
          size="small"
          style={{ width: '250px' }}
          value={currentMonths}
          mode="multiple"
          onChange={changeCurrentMonths}
          treeCheckable
          maxTagCount={2}
          treeData={months}
        />
      </Col>
      <Col>
        <AuthorizedButton authority="supply_overall_OkSupply">
          <Button onClick={handleProjectReturnMoney}>项目回款系数</Button>
        </AuthorizedButton>
      </Col>
    </Row>
  );
}
